<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
</head>
<body>
<div id="example-2">
    <simple-counter V-bind:counter="2"></simple-counter>
    <simple-counter counter="2"></simple-counter>
</div>
<script src="vue.js"></script>
<script>
    var data = { counter: 0 };
    //定义名为 todo-item 的新组件
    Vue.component('simple-counter', {
        props: ['counter'],
        template: '<button v-on:click="counter += 1">{{ counter }}</button>',
        data: function(){
            return {counters:this.counter};
        },
        computed: {
            counterss: function () {
                return this.counter;
            }
        }
    });
    new Vue({
        el: '#example-2',
        data:data
    })
</script>
</body>
</html>